<template>
  <div class="tags" v-if="tags && tags.length">
    <div class="tag-item flex-align-center" v-for="(item, index) in tags" :key="index">{{ item }}</div>
  </div>
</template>

<script>
  export default {
    props: {
      tags: {
        type: Array,
      },
    },
    mounted() {},
    methods: {},
  };
</script>

<style lang="less">
  .tags {
    margin: 1.2rem auto 1rem;
    display: flex;
    flex-wrap: wrap;
    .tag-item {
      padding: 0 0.8rem;
      height: 1.7rem;
      line-height: 1;
      background: rgba(#ffffff, 0.05);
      border-radius: 0.8rem;
      font-size: 1rem;
      color: rgba(#ffffff, 0.5);
      margin-right: 0.6rem;
      text-align: center;
    }
  }
</style>
